<template>
    <ProTable
        ref="proTableRef"
        :loading="table.isRefresh"
        controllerUrl="operationLog"
        :data="table.data"
        :columns="columns"
        :page="table.page"
        :headerActionTypes="['search', 'dynamicQuery']"
        :queryFormItems="queryFormItems"
        :dynamicQuery="table.dynamicQuery"
        @onTableAction="onTableAction"
    ></ProTable>
</template>

<script setup lang="tsx">
import { OperationLogType } from '@/api/system/log/type'
import { QueryFormItem } from '@/types/queryform'

const { table, proTableRef, onTableAction } = useTable({ api: new ProTableApi('operationLog') })

const columns = reactive<Array<TableColumnType<OperationLogType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        prop: 'userName',
        label: '用户名',
        align: 'center',
    },
    {
        prop: 'apiLabel',
        label: '接口',
        showOverflowTooltip: true,
    },
    {
        prop: 'apiPath',
        label: '接口路由',
        showOverflowTooltip: true,
    },
    {
        prop: 'httpMethod',
        label: '请求方法',
        align: 'center',
        width: '100',
        component: (scope: any) => {
            const color = getHttpMethodTagColor(scope.row.httpMethod)
            return (
                color && (
                    <el-tag class="tag-httpMethod" color={color}>
                        {scope.row.httpMethod}
                    </el-tag>
                )
            )
        },
    },
    {
        prop: 'params',
        label: '参数',
        showOverflowTooltip: true,
    },
    {
        type: 'tag',
        prop: 'ip',
        label: 'IP地址',
        align: 'center',
    },
    {
        prop: 'browser',
        label: '浏览器',
        align: 'center',
    },
    {
        prop: 'os',
        label: '操作系统',
        align: 'center',
    },
    {
        prop: 'device',
        label: '设备',
        align: 'center',
    },
    {
        prop: 'userAgent',
        label: 'UserAgent',
        width: '120',
        showOverflowTooltip: true,
    },
    {
        prop: 'elapsedMilliseconds',
        label: '耗时(ms)',
        align: 'center',
    },
    {
        prop: 'statusCode',
        label: '状态码',
        align: 'center',
    },
    {
        prop: 'isSuccess',
        label: '是否成功',
        align: 'center',
        component: (scope: any) => {
            return <el-tag type={scope.row.isSuccess ? 'success' : 'error'}>{scope.row.isSuccess ? '是' : '否'}</el-tag>
        },
    },
    {
        prop: 'message',
        label: '消息',
        showOverflowTooltip: true,
    },
    {
        prop: 'result',
        label: '结果',
        align: 'center',
    },
    {
        prop: 'createDateTime',
        label: '创建时间',
        showOverflowTooltip: true,
    },
])

const queryFormItems = reactive<Array<QueryFormItem<OperationLogType>>>([
    {
        type: 'number',
        label: 'ID',
        name: 'id',
        placeholder: 'ID',
    },
    {
        label: '用户名',
        name: 'userName',
        placeholder: '模糊查询',
    },
    {
        label: '接口',
        name: 'apiLabel',
        placeholder: '模糊查询',
    },
    {
        label: '接口路由',
        name: 'apiPath',
        placeholder: '模糊查询',
    },
    {
        type: 'select',
        label: '请求方法',
        name: 'httpMethod',
        options: (): SelectOptions[] => [
            { label: 'GET', value: 'GET' },
            { label: 'POST', value: 'POST' },
            { label: 'PUT', value: 'PUT' },
            { label: 'DELETE', value: 'DELETE' },
            { label: 'PATCH', value: 'PATCH' },
            { label: 'OPTIONS', value: 'OPTIONS' },
            { label: 'HEAD', value: 'HEAD' },
        ],
    },
    {
        label: '参数',
        name: 'params',
        placeholder: '模糊查询',
    },
    {
        label: 'IP地址',
        name: 'ip',
        placeholder: '模糊查询',
    },
    {
        label: '浏览器',
        name: 'browser',
        placeholder: '模糊查询',
    },
    {
        label: '操作系统',
        name: 'os',
        placeholder: '模糊查询',
    },
    {
        label: '设备',
        name: 'device',
        placeholder: '模糊查询',
    },
    {
        label: 'UserAgent',
        name: 'userAgent',
        placeholder: '模糊查询',
    },
    {
        type: 'range',
        label: '执行耗时',
        name: 'elapsedMilliseconds',
    },
    {
        label: '状态码',
        name: 'statusCode',
        placeholder: '模糊查询',
    },
    {
        type: 'boole',
        label: '是否成功',
        name: 'isSuccess',
        options: (): SelectOptions[] => [
            { label: '成功', value: true },
            { label: '失败', value: false },
        ],
    },
    {
        label: '消息',
        name: 'message',
        placeholder: '模糊查询',
    },
    {
        type: 'select',
        label: '排序字段',
        sort: 'Sort',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            columns.forEach((item) => {
                if (item.prop && item.label) {
                    options.push({ label: item.label, value: item.prop })
                }
            })
            return options
        },
    },
    {
        type: 'boole',
        label: '顺序',
        sort: 'Order',
        options: (): SelectOptions[] => [
            { label: '顺序', value: true },
            { label: '倒序', value: false },
        ],
    },
    {
        type: 'datetime',
        label: '创建时间',
        name: 'createDateTime',
        dateType: 'datetimerange',
    },
])
</script>

<style lang="scss" scoped></style>
